<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[500px]">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold">安排面试</h3>
          <button @click="$emit('close')" class="text-gray-600 hover:text-gray-800">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
      </div>
      
      <div class="p-6">
        <form @submit.prevent="scheduleInterview" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">候选人</label>
            <input 
              v-model="interviewForm.candidateName"
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="候选人姓名"
              required
            >
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">职位</label>
            <input 
              v-model="interviewForm.position"
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="应聘职位"
              required
            >
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">面试日期</label>
              <input 
                v-model="interviewForm.date"
                type="date" 
                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
                required
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">面试时间</label>
              <input 
                v-model="interviewForm.time"
                type="time" 
                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
                required
              >
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">面试地点</label>
            <input 
              v-model="interviewForm.location"
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="如：公司会议室A"
              required
            >
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">面试官</label>
            <input 
              v-model="interviewForm.interviewer"
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="面试官姓名"
              required
            >
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
            <textarea 
              v-model="interviewForm.notes"
              rows="3"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="面试相关说明或要求"
            ></textarea>
          </div>
          
          <div class="flex justify-end space-x-3 pt-4">
            <button 
              type="button"
              @click="$emit('close')"
              class="px-4 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50"
            >
              取消
            </button>
            <button 
              type="submit"
              class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90"
            >
              确认安排
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  close: []
  schedule: [interview: any]
}>()

const interviewForm = ref({
  candidateName: '',
  position: '',
  date: '',
  time: '',
  location: '',
  interviewer: '',
  notes: ''
})

const scheduleInterview = () => {
  emit('schedule', { ...interviewForm.value })
}
</script>
